<script setup lang="ts" name="loveTalk">

  import {reactive} from "vue";
  import {nanoid} from "nanoid";
  import { useTalkStore } from '@/store/talk'
  import axios from "axios";
  import {storeToRefs} from "pinia";

let talkStore = useTalkStore()
const { talkList } = storeToRefs(talkStore)

  talkStore.$subscribe((mutate,state) => {
    console.log('talkStore里面保存的数据发生了变化')
    console.log('mutate',mutate)
    console.log('state',state)
    localStorage.setItem('talkList',JSON.stringify(state.talkList))
  })

  function getTalkListInfo () {
    talkStore.getATalk()

    // //发请求
    // axios.get('https://api.uomg.com/api/rand.qinghua?format=json').then(res => {
    //   //这个写法是连续解构赋值加重命名
    //   let {data:{content:title}} = res
    //   console.log(res.data)
    //   //把字符串包装成对象
    //   let obj = {id: nanoid(),title }
    //   talkStore.talkList.unshift(obj)
    // })
  }
</script>

<template>
  <div class="talk">
    <button @click="getTalkListInfo">获取一句</button>
    <ul>
      <li v-for="(item, index) in talkList" :key="index">
        {{ item.title }}
      </li>
    </ul>
  </div>
</template>

<style scoped>
.talk {
  background-color: #ba7c4a;
  padding: 10px;
  border-radius: 10px;
  box-shadow: 0 0 10px;
}
</style>